// --------------------获取文章列表数据-----------
//声明请求参数
let data = {
  pagenum:1, //页码，默认1
  pagesize:2, //自己约定的，每页显示几条数据
}

//定义函数，分页获取数据，并渲染到表格中
function renderArticle(){
  $.ajax({
    url:'/my/article/list',
    data:data,
    success:function(res){
      console.log(res);
      if(res.status === 0){
        let str ='';
        res.data.forEach(item => {
          str +=`
          <tr>
          <td>${item.title}</td>
          <td>${item.cate_name}</td>
          <td>${item.pub_date}</td>
          <td>${item.state}</td>
          <td>
            <button type="button" class="layui-btn layui-btn-xs">
              编辑
            </button>
            <button
              type="button"
              class="layui-btn layui-btn-danger layui-btn-xs"
            >
              删除
            </button>
          </td>
        </tr>
        `;
        })
        $('tbody').html(str);
        //等页面刷新渲染完毕，调用函数，创建分页
        showPage(res.total);
      }
    }
  });
}

renderArticle();


//------------------------分页------------
function showPage(t){
  let laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
  elem: 'page', //注意，这里的 test1 是 ID，不用加 # 号
  count: t ,//数据总数，从服务端得到
  limit:10,//每页显示几条
  limits:[2,3,5,10,15],
  curr:data.pagenum,//当前页
  // prev:'上一篇',
  layout:['limit', 'prev', 'page', 'next', 'count', 'skip'], //自定义排版
  //当切换页码的时候，下面的jump函数就会执行
  jump:function (obj,first){
    //首次不换行
    if(!first){
    //do something
    //obj包含了当前分页的所有参数，比如：
    // console.log(obj.curr); //得到当前页，以编向服务端请求对应页的数据。
    // console.log(obj.limit);//得到每页显示的条数
    data.pagenum=obj.curr;
    data.pagesize=obj.limit;
    renderArticle();
    }
  }
});
}


// ----------------------获取分类 处理下拉框-------------
$.ajax({
  url:'/my/category/list',
  success:function(res){
    console.log(res);
    if(res.status === 0){
      let str = '';
      res.data.forEach(item => {
        str +=`<option value="${item.id}">${item.name}</option>`;
      });
      $('#cate_id').append(str);
      //动态创建的 下拉框，单选按钮，复选按钮，需要更新渲染
      let form =layui.form;
      //form.render('select','表单中的lay-filter属性的值')；
      form.render('select');
    }
  }
})

//--------------------------帅选----------------------
$('#search').on('submit',function(e) {
  e.preventDefault();
  //获取两个下拉框的值
  let cate_id = $('#cate_id').val();
  let state = $('#state').val();

  //添加请求参数
if(cate_id){
  data.state = state;
}else {
  delete data.state;
}

//重置 pagenum，帅选之后 从第一页开始浏览数据
data.pagenum = 1;
  //发送请求
  renderArticle();
})